
.icon{
	position: relative;
	//top: -1px;
	top: 0px;
	div&{
		display: block;
		margin: auto;
	}
	span&{
		display: inline-block;
		vertical-align: middle;
	}
	.icon-bgPosition(@n,@size){
		@icon-size:@size;
		@icon-bg-y: -(100px - @icon-size)/2-100px*@n;
		@icon-bg-x:-(100px - @icon-size)/2;
		@icon-bg-x-hover:@icon-bg-x - 100px;
		@icon-bg-x-checked:@icon-bg-x - 200px;
		@icon-bg-x-disabled:@icon-bg-x - 300px;
		@icon-bg-x-warning:@icon-bg-x - 400px;
		@icon-bg-x-danger:@icon-bg-x - 500px;
		background-position: @icon-bg-x @icon-bg-y;
		&:hover,
		*:hover>&{
			background-position: @icon-bg-x-hover @icon-bg-y;
		}
		&.normal,
		*.normal>&{
			background-position: @icon-bg-x @icon-bg-y;
		}
		&.checked,
		*.checked>&{
			background-position: @icon-bg-x-checked @icon-bg-y;
		}
		&.disabled,
		*.disabled>&{
			background-position: @icon-bg-x-disabled @icon-bg-y;
		}
		&.disabled:hover,
		*.disabled:hover>&{
			background-position: @icon-bg-x-warning @icon-bg-y;
		}
		&.disabled.checked,
		*.disabled.checked>&{
			background-position: @icon-bg-x-danger @icon-bg-y;
		}
	}
	&.icon-size-16{
		@mySize:16px;
		width: @mySize;
		height: @mySize;
		background-image: url(../images/icon_size_16.png);
		&.icon-helpTips{
			.icon-bgPosition(1,@mySize);
		}
		&.icon-btn-plus{
			.icon-bgPosition(2,@mySize);
		}
		&.icon-checkbox{
			.icon-bgPosition(3,@mySize);
		}
		&.icon-radio{
			.icon-bgPosition(4,@mySize);
		}
		&.icon-delete{
			.icon-bgPosition(5,@mySize);
		}
		&.icon-remove{
			.icon-bgPosition(6,@mySize);
		}
		&.icon-select{
			.icon-bgPosition(7,@mySize);
		}
		&.icon-excel{
			.icon-bgPosition(8,@mySize);
		}
		&.icon-close{
			.icon-bgPosition(9,@mySize);
		}
		&.icon-search{
			.icon-bgPosition(10,@mySize);
		}
		&.icon-sort{
			.icon-bgPosition(11,@mySize);
		}
		&.icon-sort-down{
			.icon-bgPosition(12,@mySize);
		}
		&.icon-sort-up{
			.icon-bgPosition(13,@mySize);
		}
		&.icon-user-primary{
			.icon-bgPosition(14,@mySize);
		}
		&.icon-user{
			.icon-bgPosition(15,@mySize);
		}
		&.icon-setting{
			.icon-bgPosition(16,@mySize);
		}
		&.icon-ring{
			.icon-bgPosition(17,@mySize);
		}
		&.icon-slide-down{
			.icon-bgPosition(18,@mySize);
		}
		&.icon-plus-square{
			.icon-bgPosition(19,@mySize);
		}
		&.icon-less-square{
			.icon-bgPosition(20,@mySize);
		}

		&.icon-device-microphone{
			.icon-bgPosition(21,@mySize);
		}
		&.icon-device-camera{
			.icon-bgPosition(22,@mySize);
		}
		&.icon-device-headset{
			.icon-bgPosition(23,@mySize);
		}
		&.icon-device-network{
			.icon-bgPosition(24,@mySize);
		}

		&.icon-device-microphone-error{
			.icon-bgPosition(25,@mySize);
		}
		&.icon-device-camera-error{
			.icon-bgPosition(26,@mySize);
		}
		&.icon-device-headset-error{
			.icon-bgPosition(27,@mySize);
		}
		&.icon-device-network-error{
			.icon-bgPosition(28,@mySize);
		}

		&.icon-device-microphone-disabled{
			.icon-bgPosition(29,@mySize);
		}
		&.icon-device-camera-disabled{
			.icon-bgPosition(30,@mySize);
		}
		&.icon-device-headset-disabled{
			.icon-bgPosition(31,@mySize);
		}
		&.icon-device-network-disabled{
			.icon-bgPosition(32,@mySize);
		}


		&.icon-checked-true{
			.icon-bgPosition(33,@mySize);
		}
		&.icon-checked-false{
			.icon-bgPosition(34,@mySize);
		}
		&.icon-editpencil{
			.icon-bgPosition(35,@mySize);
		}
		&.icon-calendar{
			.icon-bgPosition(36,@mySize);
		}
		&.icon-asterisk{
			&:before{
				content: "*";
				font-size: 16px;
				color: #e24242;
			}
		}
	}
	&.icon-size-24{
		@mySize:24px;
		width: @mySize;
		height: @mySize;
		background-image: url(../images/icon_size_24.png);
		&.icon-clouddisk-folder{
			.icon-bgPosition(1,@mySize);
		}
		&.icon-clouddisk-folder-system{
			.icon-bgPosition(2,@mySize);
		}
		&.icon-sitetopbar-ring{
			.icon-bgPosition(3,@mySize);
		}
		&.icon-sitetopbar-exit{
			.icon-bgPosition(4,@mySize);
		}

	}
	&.icon-avatar{
		background-image: url(../images/icon_avatar.png);
		background-repeat: no-repeat;
		border-radius: 20%;
		img{
			border-radius: 20%;
		}
		.msgCounter{
			position: absolute;
			//margin-right: -15px;
			background-color: #f64;
			border-radius: 999px;

			text-align: center;
			color: #fff;

		}
		&.border-1px{
			box-shadow: 0px 0px 0px 1px #fff;
		}
		&.icon-size-20{
			@mySize:20px;
			width: @mySize;
			height: @mySize;
			background-position: 0 0;
			img{
				width: @mySize;
				height: @mySize;
			}
		}
		&.icon-size-30{
			@mySize:30px;
			width: @mySize;
			height: @mySize;
			background-position: 0 -20px;
			img{
				width: @mySize;
				height: @mySize;
			}
		}
		&.icon-size-40{
			@mySize:40px;
			width: @mySize;
			height: @mySize;
			background-position: 0 -50px;
			img{
				width: @mySize;
				height: @mySize;
			}
			.msgCounter{
				min-width: 18px;
				height: 18px;
				left: 27px;
				top: 1px;
				font-size: 12px;
				line-height: 17px;
			}
		}
		&.icon-size-50{
			@mySize:50px;
			width: @mySize;
			height: @mySize;
			background-position: 0 -90px;
			img{
				width: @mySize;
				height: @mySize;
			}
			.msgCounter{
				min-width: 18px;
				height: 18px;
				left: 32px;
				top: 0;
				font-size: 12px;
				line-height: 17px;
			}
		}
		&.icon-size-60{
			@mySize:60px;
			width: @mySize;
			height: @mySize;
			background-position: 0 -140px;
			img{
				width: @mySize;
				height: @mySize;
			}
		}
		&.icon-size-80{
			@mySize:80px;
			width: @mySize;
			height: @mySize;
			background-position: 0 -200px;
			img{
				width: @mySize;
				height: @mySize;
			}
		}
		&.icon-size-100{
			@mySize:100px;
			width: @mySize;
			height: @mySize;
			background-position: 0 -280px;
			img{
				width: @mySize;
				height: @mySize;
			}
		}
		&.icon-size-120{
			@mySize:120px;
			width: @mySize;
			height: @mySize;
			background-position: 0 -380px;
			img{
				width: @mySize;
				height: @mySize;
			}
		}


	}

	&.icon-radio,
	&.icon-checkbox{
		position: relative;
		overflow: hidden;
		input[type="checkbox"],
		input[type="radio"]{
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;
			font-size: 100px;
			opacity: 0;
			filter:alpha(opacity=0);
			&:disabled{
				display: none;
			}
		}
	}
	&.icon-loading{
		width: 205px;
		height: 140px;
		background-image: url(../images/loading.gif);
	}
	&.icon-upload,
	&.icon-uploadimg{
		position: relative;
		overflow: hidden;
		background-position: center center;
		background-repeat: no-repeat;
		border:1px solid #d0d6df;
		&:before{
			position: absolute;
			content: "";
			width: 100px;
			height: 100px;
			left: 50%;
			top: 50%;
			margin-left: -50px;
			margin-top: -50px;
			background-image: url(../images/icon_size_48.png);
			background-repeat: no-repeat;
			background-position: 0 -100px;
		}
		&:hover{
			&:before{
				background-position: -100px -100px;
			}
		}
		img{
			position: relative;
      display: block;
			z-index: 1;
		}
		input[type="file"]{
			position: absolute;
			z-index: 2;
			min-width: 100%;
			min-height: 100%;
			right: 0;
			top: 0;
			font-size: 500px;
			cursor: pointer;
			.opacity(0);
		}
		&.disabled{
			&:before{
				display: none;
			}
		}
	}
//  &.icon-center{
//	  display: block;
//	  margin: auto;
//  }

	&.icon-upload {
		&:before {
			background-image: none;
		}
	}
	&.icon-plus{
		position: relative;
		width: 50px;
		height: 50px;
		border: 2px dashed #9a9ba3;
		border-radius: 50%;
		&:before,
		&:after{
			content: '';
			position: absolute;
			left: 50%;
			top: 50%;
			background-color: #aaabb2;
		}
		&:before{
			width: 60%;
			height: 2px;
			margin-left: -30%;
			margin-top: -1px;
		}
		&:after{
			width: 2px;
			height: 60%;
			margin-left: -1px;
			margin-top: -30%;
		}
	}
	&.icon-minus{
		position: relative;
		width: 50px;
		height: 50px;
		background-color: #c5c8d0;
		//border: 2px dashed #9a9ba3;
		border-radius: 50%;
		&:before{
			content: '';
			position: absolute;
			left: 50%;
			top: 50%;
			background-color: #fff;
		}
		&:before{
			width: 60%;
			height: 2px;
			margin-left: -30%;
			margin-top: -1px;
		}
	}
	&.icon-empty{
		display: block;
		margin: auto;
		min-width: 120px;
		padding-top: 140px;
		background-image: url(../images/icon_empty.png);
		background-repeat: no-repeat;
		background-position: center top;
		text-align: center;
		font-size: 12px;
		color: #b3bec3;
	}
	.icon-numBall-templete(@size){
		width: @size;
		height: @size;
		line-height: @size;
	}
	&.icon-numBall{
		border-radius: 999px;
		text-align: center;
		background-color: #818e9b;
		color: #fff;
		&.icon-size-18{
			.icon-numBall-templete(18px);
		}
		&.checked,
		*.checked>&{
			background-color: #30ba78;
		}
	}
}
